<template>
	<cl-crud :ref="setRefs('crud')" @load="onLoad">
		<el-row type="flex" align="middle">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-flex1 />
			<cl-filter label="渠道">
				<el-select size="mini" v-model="query.source" placeholder="渠道">
					<el-option
						v-for="item in sourceList"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</cl-filter>
			<cl-filter label="页面：">
				<el-select size="mini" v-model="query.magic_key" placeholder="页面类型">
					<el-option
						v-for="item in keyList"
						:key="item.name"
						:label="item.remark"
						:value="item.name"
					>
					</el-option>
				</el-select>
			</cl-filter>
				
			<!-- 关键字搜索 -->
			<cl-search-key :on-search="onSearch" placeholder="模糊搜索标题 / key" />
		</el-row>

		<el-row>
			<!-- 数据表格 -->
			<cl-table :ref="setRefs('table')" v-bind="table">
				<template #slot-btn="{ scope }">
					<el-button
						type="text"
						size="mini"
						style="margin-left: 8px"
						target="_blank"
						@click="toMagic(scope.row.id)"
						>装修</el-button
					>
				</template>
			</cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

		<!-- 新增、编辑 -->
		<cl-upsert :ref="setRefs('upsert')" v-bind="upsert">
			<template #slot-magicKey="{ scope }">
				<el-select v-model="scope.magicKey" placeholder="请选择">
					<el-option
						v-for="item in keyList"
						:key="item.name"
						:label="item.remark"
						:value="item.name"
						:disabled="!item.name"
					>
					</el-option>
				</el-select>
			</template>
		</cl-upsert>
	</cl-crud>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useCool } from "/@/core";
import { source } from "/$/magic/lib/source";

export default defineComponent({
	setup() {
		// 功能

		const { refs, setRefs, service, router } = useCool();
		const sourceList = ref(source);
		const keyList = ref<any[]>([]);
		const query = reactive<any>({
			magic_key:null,
			source:null
		});

		async function getMagickey() {
			service.dict.info.data({ types: "magic" }).then((res: any) => {
				keyList.value = res["magic"];
				keyList.value.unshift({ remark: "全部", name: null });
			});
		}

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			items: [
				{
					label: "标题",
					prop: "title",
					component: {
						name: "el-input",
						props: {
							clearable: true
						},
						attrs: {
							placeholder: "请输入标题"
						}
					},
					rules: {
						required: true,
						message: "标题不能为空"
					}
				},
				{
					label: "名称",
					prop: "name",
					component: {
						name: "el-input",
						props: {
							clearable: true
						},
						attrs: {
							placeholder: "请输入名称"
						}
					},
					rules: {
						required: true,
						message: "名称不能为空"
					}
				},
				{
					label: "渠道",
					prop: "source",
					value: "default",
					component: {
						name: "el-select",
						attrs: {
							placeholder: "选择使用渠道"
						},
						options: sourceList,
					},
					rules: {
						required: true,
						message: "不能为空"
					}
				},
				{
					label: "页面key",
					prop: "magicKey",
					component: {
						name: "slot-magicKey"
					}
				},
				{
					label: "排序",
					prop: "sort",
					component: {
						name: "el-input-number"
					}
				},
				{
					label: "是否上架",
					span: 12,
					prop: "status",
					component: {
						name: "el-switch",
						props: {
							"active-value": 1,
							"inactive-value": 0
						}
					}
				},
				{
					label: "是否置顶",
					span: 12,
					prop: "isTop",
					component: {
						name: "el-switch",
						props: {
							"active-value": 1,
							"inactive-value": 2
						}
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					label: "ID",
					prop: "id"
				},
				{
					label: "标题",
					prop: "title"
				},
				{
					label: "名称",
					prop: "name"
				},
				{
					label: "是否置顶",
					prop: "is_top",
					align: "center",
					dict: [
						{
							label: "是",
							value: 1,
							type: "primary"
						},
						{
							label: "否",
							value: 2,
							type: "warning"
						}
					]
				},
				{
					label: "页面key",
					prop: "magic_key",
					align: "center"
				},
				{
					label: "渠道",
					prop: "source",
					align: "center",
					dict: sourceList
				},
				{
					label: "状态",
					prop: "status",
					dict: [
						{
							label: "开启",
							value: 1,
							type: "success"
						},
						{
							label: "关闭",
							value: 0,
							type: "danger"
						}
					],
					minWidth: 100
				},
				{
					label: "创建时间",
					prop: "createTime",
					sortable: "custom",
					minWidth: 150
				},
				{
					label: "操作",
					type: "op",
					buttons: ["edit", "delete", "slot-btn"]
				}
			]
		});

		// crud 加载
		async function onLoad({ ctx, app }: CrudLoad) {
			// 绑定 service
			ctx.service(service.magic.magic).done();
			app.refresh();
			await getMagickey();
		}

		function toMagic(id: number) {
			let routeData = router.resolve({ path: "/magic", query: { id } });
			window.open(routeData.href, "_blank");

			// router.push({ path: "/magic", query: { id } });
		}
		function onSearch(params:any, { next }:any) {
			next(query);
		}
		return {
			refs,
			setRefs,
			keyList,
			upsert,
			sourceList,
			table,
			query,
			toMagic,
			onSearch,
			onLoad
		};
	}
});
</script>
